<!-- 在这里尝试写一下我们登录成功的主页面 -->

<template>
  <div>
    <el-container>
      <!-- 左侧导航栏  aside,其中一般width我们设置200px，然后高度那个 100vh 则是表示浏览器上下通（小技巧）-->
      <el-aside :width="asideWidth" style=" min-height: 100vh; background-color: rgb(255,255,255);">
        <!-- 左侧导航栏的logo区域 -->
        <div style="height: 60px;line-height: 60px; display: flex; 
        align-items: center; justify-content: center;">
          <!-- align-items: center;（上下居中） justify-content: center; （左右居中） -->
          <img src="@/assets/logo.png" alt="" style="width: 40px; height: 40px;">
          <!--设置一下淡入淡出效果  -->
          <transition name="el-zoom-in-center">
            <span
                style="color: rgb(85, 84, 84); font-weight: bolder; margin-left: 5px; font-size: 20px; font-family: Arial, Helvetica, sans-serif; "
                v-show="!isCollapse">BriefReport</span>

          </transition>
        </div>

        <!-- 下面是菜单导航栏 el-menu default-active=""表示当前点击了的激活的菜单用来显示高亮的 
        配置了route属性表示可以点击进行路由
        -->
        <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none;"
                 background-color="rgb(255,255,255)" :default-active="$route.path" router
                 text-color="rgb(135, 144, 155) "
                 active-text-color=#f1eeee>
          <!-- 一级菜单选项  el-menu-item ，其中index属性我们可以配置路由信息进行点击跳转-->

          <el-menu-item index="/workbench">
            <!-- 这个template里则是一些细节的描述了 -->
            <i class="el-icon-s-platform"></i>
            <span slot="title">工作台</span>
          </el-menu-item>

          <el-menu-item index="/notice">
            <!-- 这个template里则是一些细节的描述了 -->
            <i class="el-icon-message-solid"></i>
            <span slot="title">通知</span>
          </el-menu-item>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-suitcase"></i>
              <span>工作中心</span>
            </template>
            <el-menu-item index="/taskSummary"><i class="el-icon-files"></i>任务汇总</el-menu-item>
            <el-menu-item index="/mytasks"><i class="el-icon-finished"></i>我的任务</el-menu-item>
            <el-menu-item index="/taskManagement"><i class="el-icon-reading"></i>任务管理</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>日志中心</span>
            </template>
            <el-menu-item index="/noteManagement"><i class="el-icon-pie-chart"></i>日志管理</el-menu-item>
            <el-menu-item index="/myNotes"><i class="el-icon-notebook-2"></i>我的日志</el-menu-item>
<!--            <el-menu-item index="/myWeeklyNotes"><i class="el-icon-notebook-1"></i>我的周报</el-menu-item>
            <el-menu-item index="/monthlySummary"><i class="el-icon-receiving"></i>月度总结</el-menu-item>-->
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <span>管理中心</span>
            </template>
            <el-menu-item index="/employeeManagement"><i class="el-icon-user"></i>员工管理</el-menu-item>
<!--            <el-menu-item index="/handOverNodesManagement"><i class="el-icon-reading"></i>工作流管理</el-menu-item>
            <el-menu-item index="/allTaskManagement"><i class="el-icon-postcard"></i>总体任务管理</el-menu-item>-->
            <el-menu-item index="/allNoteManagement"><i class="el-icon-copy-document"></i>总体日志管理</el-menu-item>
            <el-menu-item index="/projectManagement"><i class="el-icon-office-building"></i>项目管理</el-menu-item>
          </el-submenu>


          <!-- 二级菜单选项 el-submenu-->
        </el-menu>
      </el-aside>

      <!-- 邮册头部head和网页主体main -->
      <el-container>


        <!-- 右侧头部 -->
        <el-header>
          <!-- 给个按钮，设置点击事件后会让aside回收 -->
          <el-button @click="handleCollapse" :icon="collapseIcon" circle style="margin: 5px;"></el-button>

          <!-- 添加面包屑组件 -->
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
            <!-- 配置to属性表示路由 -->
            <el-breadcrumb-item :to="{ path: '/Workbench' }">工作台</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">活动管理</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 配置一下头像区域 -->
          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end;">
            <!-- 头像点击出现下拉 -->
            <el-dropdown>

              <div style="display: flex; align-items: center;">
                <!-- 配置头像 -->
                <el-avatar :src="imgUrl" alt="" style="width: 40px; height: 40px;"></el-avatar>
                <!--配置动态用户名-->
                <Span style="margin-left: 5px; font-weight: bolder;">{{ loginUser.name }}</Span>
              </div>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-user" @click.native="userInfo">个人信息</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit">修改密码</el-dropdown-item>
                <el-dropdown-item icon="el-icon-error" @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 右侧页面主体 -->

        <el-main style="background-color: rgb(246, 246, 248) ">
          <transition name="el-fade-in-linear">
            <router-view/>
          </transition>
        </el-main>


      </el-container>

    </el-container>

  </div>


</template>

<script>

import axios from "axios";

export default {
  name: 'homeView',
  data() {
    return {
      isCollapse: false,
      asideWidth: '240px',
      collapseIcon: 'el-icon-s-fold',
      users: [],
      dayValue: new Date(),
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      imgUrl:''
    }
  },
  // mounted表示页面加载好后便开始的请求
  mounted() {
    //更改一下请求
    /*this.$request.get("/login/getalluser").then(res => {
      this.users = res;
    })*/
    /* axios.get('http://localhost:39051/login/getalluser').then(res => {
       console.log(res)
       this.users = res.data;
     })*/
    //发送请求获取用户权限
    this.$request.get("/login/getUserRoles", {
      params: {
        userId: JSON.parse(localStorage.getItem("loginUser")).uid
      }
    }).then(res => {
      if (res.successFlag) {
        localStorage.setItem("loginUserRole", JSON.stringify(res.data))
      } else {
        this.$message.error('获取当前用户角色失败！')
      }
    }),
    //获取当前用户头像信息
        this.$request.get("/user/getAvatar", {
          params: {
            userId: JSON.parse(localStorage.getItem("loginUser")).uid
          }
        }).then(res => {
          if (res.successFlag) {
            localStorage.setItem("loginUserAvatar", JSON.stringify(res.data))
            this.imgUrl=res.data
          } else {
            this.$message.error('获取当前用户头像失败！')
          }
        })
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px' : '240px';
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    },
    //  退出，并清理localStorage
    logout() {
      localStorage.removeItem("loginUser")
      localStorage.removeItem("loginUserRole")
      localStorage.removeItem("loginUserAvatar")
      this.$router.push("/login")
    },
    userInfo() {
      this.$router.push('/userInformation')
    }
  }
}

</script>
<!-- 因为二级菜单的颜色没有提供设置，这么我们需要自己定义一些css -->
<style>
/* 菜单项被选中的样式 */
.el-menu-item.is-active {
  background-color: rgb(0, 128, 252) !important;
  border-radius: 12px;
}

.el-menu-item {
  margin: 4px;
}

/* 菜单项鼠标滑动到上方时的变化 */
.el-menu-item:hover {
  color: black !important;
  background: rgb(230, 243, 255) !important;
  border-radius: 12px;
}

/* 父级菜单鼠标滑动到上方时的变化*/
.el-submenu__title:hover {
  color: black !important;
  background: rgb(230, 243, 255) !important;
  border-radius: 12px;
}

/* 整个父级菜单点击下拉后的样式 */
.el-menu--inline {
  background-color: rgb(239, 245, 250) !important;
  border-radius: 12px;
  margin: 2px;
}

/* 父级菜单下的二级菜单的样式 */
.el-menu--inline .el-menu-item {
  border-radius: 12px;
}


.el-icon-s-fold {
  font-size: 20px;
}

.el-icon-s-unfold {
  font-size: 20px;
}

/* 解决侧边栏收缩卡顿问题*/
.el-aside {
  transition: width 0.15s !important;
  -webkit-transition: width 0.15s !important;
  -moz-transition: width 0.15s !important;
  -webkit-transition: width 0.15s !important;
  -o-transition: width 0.15s !important;
}

.el-menu {
  transition: all 10ms;
}

/* 设置一下header的样式 */
.el-header {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;

}

/* 设置一下收缩aside后的右边弹出样式 */
.el-menu.el-menu--popup.el-menu--popup-right-start {
  border-radius: 12px !important;
}

/* 设置一下首页card的样式 */
.massageCard-1 {
  height: 150px;
  width: 25%;
  border-radius: 8px !important;
  margin: 10px;
  background-color: rgb(191, 202, 247) !important;
  background-image: url('../assets/dailyreport.png');
  background-size: 100% 100%;
}

.massageCard-2 {
  height: 150px;
  width: 25%;
  border-radius: 8px !important;
  margin: 10px;
  background-color: rgb(241, 229, 219) !important;
  background-image: url('../assets/waitDone.png');
  background-size: 100% 100%;
}

.massageCard-3 {
  height: 150px;
  width: 25%;
  border-radius: 8px !important;
  margin: 10px;
  background-color: rgb(225, 234, 219) !important;
  background-image: url('../assets/allDone.png');
  background-size: 100% 100%;
}

.massageCard-4 {
  height: 150px;
  width: 25%;
  border-radius: 8px !important;
  margin: 10px;
  background-color: rgb(178, 209, 243) !important;
  background-image: url('../assets/weekReport.jpg');
  background-size: 100% 100%;
}

/*解决子菜单高亮，父级菜单不亮的问题*/


</style>